<!-- 横向选项卡（水平滚动导航栏） -->
<template>
  <scroll-view
    scroll-y
    lower-threshold="50"
    @scrolltolower="onscrollerLower"
    class="container"
  >
    <view class="switch-bar">
      <view
        class="switch-item"
        v-for="(item, index) in switchBar"
        :key="index"
        :class="{ active: tabIndex === index }"
        @tap="toggleTab(index)"
      >
        <text>{{ item.name }}</text>
        <view class="switch-tab-line"></view>
      </view>
    </view>

    <view class="content">
      <view
        class="content-item"
        v-for="(item, index) in data[tabIndex].data"
        :key="item.id"
        @tap="tapItem(item)"
      >
        <view class="content-img">
          <image :src="item.media[0].imgUrl" mode="aspectFill" />
        </view>
        <view class="right">
          <view class="content-info">
            <view class="content-title">{{ item.name }}</view>
            <view class="content-tag"
              ><view class="rate"
                ><uni-icons type="star-filled" color="#ffa500" size="16" />{{
                  item.rating
                }}</view
              >
              <uni-tag
                :inverted="true"
                :mark="true"
                :text="item.category"
                type="warning"
                size="small"
            /></view>
            <view class="content-price">￥{{ item.price.split(".")[0] }}</view>
            <view class="content-location"
              ><uni-icons type="map-filled" color="#999" size="16" />
              {{ item.location }}</view
            >
          </view>

          <view class="content-extra">
            <uni-icons type="right" color="#999" size="24" />
          </view>
          <view class="distance"
            >距离{{
              mapUtils.distance(
                +item.latitude,
                +item.longitude,
                local?.latitude,
                local?.longitude
              )
            }}</view
          >
        </view>
      </view>
    </view>
    <uni-load-more :status="statusMore" />
  </scroll-view>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";

import mapUtils from "@/utils/map";
import { onLoad } from "@dcloudio/uni-app";
import { getCollectDataAPI } from "@/services";
let statusMore = ref<UniHelper.UniLoadMoreStatus>("more");
let tabIndex = ref<number>(0);
let switchBar = reactive<any>([
  {
    name: "美食餐厅",
    id: "food",
  },
  {
    name: "旅游景点",
    id: "travel",
  },
]);

let data = reactive<any>([
  {
    type: "美食",
    data: [],
  },
  {
    type: "旅游",
    data: [],
  },
]);
let local = ref<any>({
  longitude: 112.48461151123047,
  latitude: 23.051959991455078,
});

onLoad((options: any) => {
  uni.getLocation({
    type: "wgs84",
    altitude: false,
    success: (result) => {
      local.value = {
        latitude: result.latitude,
        longitude: result.longitude,
      };
    },
    fail: () => {},
    complete: () => {},
  });
  let { userId } = options;

  if (!userId) {
    uni.navigateBack();
    uni.showToast({
      title: "请先登录",
      icon: "error",
    });
  } else {
    uId.value = userId;
    initData();
  }
});
let uId = ref<string>("");
let pageParams = {
  page: 1,
  size: 5,
};
const initData = async () => {
  let params = {
    page: 1,
    limit: pageParams.size,
    userId: uId.value,
    type: switchBar[tabIndex.value].id,
  };
  let result: any = await getCollectDataAPI(params);
  if (result.code === 200) {
    data[tabIndex.value].data = result.data;
    if (pageParams.page < result.pages) {
      statusMore.value = "more";
      pageParams.page++;
    } else {
      statusMore.value = "noMore";
    }
  } else {
    statusMore.value = "noMore";
    uni.showToast({
      title: "暂无数据",
      icon: "error" || "fail",
    });
  }
};

const toggleTab = (index: number) => {
  tabIndex.value = index;
  pageParams.page = 1;
  initData();
};

const onscrollerLower = async () => {
  if (statusMore.value == "noMore") {
    return uni.showToast({
      title: "没有更多数据了",
      icon: "error" || "fail",
    });
  }
  statusMore.value = "loading";

  let params = {
    page: pageParams.page,
    limit: pageParams.size,
    userId: uId.value,
    type: switchBar[tabIndex.value].id,
  };
  let result: any = await getCollectDataAPI(params);
  console.log(result);
  if (result.code === 200) {
    data[tabIndex.value].data = result.data;
    if (pageParams.page < result.pages) {
      pageParams.page++;
    } else {
      statusMore.value = "noMore";
    }
  } else {
    uni.showToast({
      title: "没有更多数据了",
      icon: "error" || "fail",
    });
  }
};

const tapItem = (item: any) => {
  uni.navigateTo({
    url: `/pages/detail/detail?id=${item.id}&type=${item.type}`,
  });
};
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - var(--window-top));

  .switch-bar {
    display: flex;
    justify-content: space-around;
    height: 60rpx;

    .switch-item {
      width: 50%;
      height: 100%;
      text-align: center;
      line-height: 60rpx;
      position: relative;
    }
    .active {
      color: #ffa500;
      .switch-tab-line {
        position: absolute;
        bottom: 10%;
        left: 35%;
        border-bottom: 5rpx solid #ffa500;
        border-top: 5rpx solid #ffa500;
        border-radius: 20rpx;
        width: 80rpx;
      }
    }
  }

  .content {
    background-color: white;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    padding: 10rpx 0;
    margin: 0 10rpx;
    .content-item {
      height: 230rpx;
      padding: 10rpx;
      display: flex;
      align-items: center;

      .content-img {
        display: inline-block;
        width: 28%;
        height: 200rpx;
        overflow: hidden;
        border-radius: 15%;
        margin-right: 10rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }

      .right {
        height: 200rpx;
        width: 70%;
        display: flex;
        color: #555;
        justify-content: space-between;
        position: relative;
        .content-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 28rpx;

          .content-title {
            font-size: 36rpx;
            font-weight: bold;
          }
          .content-tag {
            // width: 200rpx;
            padding: 10rpx 0;
            display: flex;
            // justify-content: space-between;
            align-items: center;

            .rate {
              font-weight: bold;
              color: #ffa500;
              margin-right: 10rpx;
            }
          }
          .content-price {
            font-weight: bold;
            color: #c50f0f;
          }
          .content-location {
            font-size: 24rpx;
          }
        }

        .content-extra {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }

        .distance {
          position: absolute;
          right: 10rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}
.loading {
  text-align: center;
  padding: 20rpx;
  color: #999;
}
</style>
